<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx }/res/css/style.css">
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
    <script type="text/javascript" src="${ctx }/res/js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="${ctx }/res/js/jquery.scrollLoading.js"></script>
    <style type="text/css">
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
		
		a {
			cursor:pointer;
		}
		
		*{ margin:0; padding:0}
		select,input{font-family:Microsoft YaHei}
		.text{ width:100%; height:38px;border:#ccc solid 1px; padding:0 2%; margin:0 0 20px 0; color:#888; font-size:14px;}
		.button{ width:100%; background:#ed145b; border:none; overflow:hidden; cursor:pointer; font-size:18px; color:#fff; text-align:center; height:40px; line-height:40px; margin:20px 0 0px;}
		.select{ width:110px;border:#ccc solid 1px; height:40px; margin:0px 0; float:left; font-size:14px; margin-right:10px}
		.select1{ width:160px;border:#ccc solid 1px; height:40px; margin:0px 0; float:left; font-size:14px;}
    </style>
	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>
    <title>软装到家</title>
</head>
<body>
 <%@include file="../head.jsp" %>
 
<!--详情-->
<div class="w-1200 margin-0-auto">
	<div class="model_show">
    	<div class="pic"><img src="${n.user.headImage }"></div>
        <div class="c1">
        	<h1>${n.user.username }<span>设计师</span></h1>
            <div class="h">
                <p>从业${n.workAge }年</p>
                <p>${n.company }设计师</p>
                <p>风格：${n.goodAtStyles }</p>
            </div>
            <a onclick="orderDesigner(${d.designer.id});" class="btn">预约设计</a>
        </div>
        <div class="r1">
        	<span>简介：</span>
			<div class="txt">${n.description }</div>
        </div>
    </div>   
</div>        
<!--详情 END-->
<!--pic-->
<div class="w-1200 margin-0-auto">
	<div class="model_show_tit">案例详情</div>   
        <div class="model_designer_w scrollLoading1">
			<c:forEach items="${designs }" var="d">
            <div class="model_designer_pic">
                <div class="bd">
                    <ul>
                        <li>
                            <div class="pic">
                            	<a href="#"><img data-original="${d.headImage }"></a>
                            	<div class="title"><a href="#"><h1>万科生活广场<span>欧美风&nbsp;140m²</span></h1></a></div>
                            </div>    
                        </li>
                      
                    </ul>
                </div>
                <div class="hd">
                    <a class="sPrev" ></a><a class="sNext" ></a>
                    <ul>
                        <c:forEach items="${d.imageList }" var="i">
                        <li style="float: left; width: 89px;"><img data-original="${i }" /></li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            </c:forEach>
            
        </div>
    <script type="text/javascript">
        jQuery(".hd").slide({ mainCell:"ul",effect:"leftLoop",autoPlay:false,vis:6,prevCell:".sPrev",nextCell:".sNext",triggerEvent:true });
        jQuery(".model_designer_pic").slide({ mainCell:".bd ul",effect:"leftLoop", autoPlay:false, delayTime:0, defaultIndex:6 ,triggerEvent:true});
    </script>
  
</div>        
<!--pic END-->
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div id="designOrder_div" style="display:none;">
<div id="order_div">
	<form>
		<input type="hidden" name="designerId" value="${designer.id }" />
		<input type="text" value="姓名" name="name" onfocus="if(value=='姓名') {value=''}" onblur="if (value=='') {value='姓名'}" class="text" id="name">
		<input type="text" value="手机号" name="mobile" onfocus="if(value=='手机号') {value=''}" onblur="if (value=='') {value='手机号'}" class="text" id="moblie">
		<select name="provinceId" class="select">
		 <option value="1">湖南省</option>
		 <option value="2">广州省</option>
		</select>
		<select name="cityId" class="select">
		 <option value="3">长沙市</option>
		 <option value="3">岳阳市</option>
		</select>
		<select name="communityId" class="select1">
		 <option value="1">北京大观园</option>
		</select>
		<input name="" type="button" class="button" onclick="return doOrder(this);" value="一键预约" id="btn">
	</form>
</div>
</div>
<!--分页-->
<%@include file="../page.jsp" %>
<%@include file="../foot.jsp" %>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/common.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script type="text/javascript">
	function gotoPage(pageNum) {   //跳转到指定页面
		location="${ctx}/design/index?page="+pageNum;
	}

    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
    }); 
</script>
</body>
</html>